<template>
  <div class="table">
    <div class="table-data">
      <div class="search-box">
        <el-input
          v-model="searchVal"
          @keydown.enter.native="searchEnterFun"
          size="small"
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" :height="tHeight" border>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column label="课程名称" prop="title"></el-table-column>
        <el-table-column width="120" label="课程等级" prop="level"></el-table-column>
        <el-table-column width="120" label="技术栈" prop="type"></el-table-column>
        <el-table-column width="120" label="报名人数" prop="count"></el-table-column>
        <el-table-column width="160" label="上线日期" prop="date"></el-table-column>
        <el-table-column v-if="getUser.key != 'visitor'" label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index,scope.row)" size="mini">编辑</el-button>
            <el-button @click="handleDelete(scope.$index,scope.row)" size="mini" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5,10,20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <EditDialog :dialogVisible="dialogVisible" :form="form" @closeDialog="closeDialog"></EditDialog>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import { State, Getter, Mutation, Action } from "vuex-class";
import EditDialog from "./EditDialog.vue";
@Component({
  components: {
    EditDialog
  }
})
export default class TableData extends Vue {
  @Getter("user") getUser: any;
  @Provide() searchVal: string = ""; //搜索框
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 5; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tableData: number[] = []; //表格数据
  @Provide() loading: boolean = false;
  @Provide() tHeight: number = document.body.offsetHeight - 270;
   @Provide() dialogVisible: Boolean = false; // 是否展示编辑页面
  @Provide() form: object = {
    title: "",
    type: "",
    level: "",
    count: "",
    date: ""
  };
  created() {
    this.loadData();
  }
  handleSizeChange(value: number): void {
    this.size = value;
    this.page = 1;
    this.searchVal ? this.loadSearchData() : this.loadData();
  }
  handleCurrentChange(value: number): void {
    this.page = value;
    this.searchVal ? this.loadSearchData() : this.loadData();
  }
  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.searchVal ? this.loadSearchData() : this.loadData();
  }
  loadSearchData() {
    // 加载搜索数据
    (this as any)
      .$axios(
        `/api/profiles/search/${this.searchVal}/${this.page}/${this.size}`
      )
      .then((res: any) => {
        // console.log(res.data);
        this.tableData = res.data.datas.list;
        this.total = res.data.datas.total;
      });
  }
  loadData() {
    (this as any).$axios
      .get(`/api/profiles/loadMore/${this.page}/${this.size}`)
      .then((res: any) => {
        this.loading = false;
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        (this as any).$message({
          message: res.data.msg,
          type: "success"
        });
      })
      .catch((error: any) => {
        this.loading = false;
      });
  }
  //回车搜索功能
  searchEnterFun(e:any) {
    console.log(e);
    var keyCode = window.event ? e.keyCode : e.which;
    if (keyCode == 13) {
      console.log(111);
      (this as any).handleSearch(); //搜索事件
    }
  }
  handleEdit(index: number, row: any) {
      console.log(index,row)
      this.dialogVisible = true;
      this.form = row;

  }
  closeDialog() {
    this.dialogVisible = false;
  }
  handleDelete(index: number, row: any) {
    console.log(row._id);
    let  id =row._id;
    (this as any).$axios
      .delete(`/api/profiles/delete/${id}`)
      .then((res: any) => {
        (this as any).$message({
          message: res.data.msg,
          type: "success"
        });

        this.tableData.splice(index, 1);
      });
  }
}
</script>
<style lang="scss" scoped>
.table-data {
  overflow:hidden 
  // height: 100%;
  .table-box {
    font-size: 14px;
  }
  .pages {
    background: #fff;
    margin-top: 10px;
    padding: 10px 10px;
    text-align: right;
    // float: right;
    height: 55px;
    width: 100%;
    box-sizing: border-box;
  }
  .search-box {
    background: #fff;
    margin-bottom: 10px;
    padding: 10px 10px;
    border-radius: 4px;
    height: 55px;
    box-sizing: border-box;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
}
.table {
  overflow: hidden;
}
</style>
